<template>
   <div class="m-left">
      <div class="posts-list">
         <ClientOnly>
            <ul>
               <!-- 置顶帖子列表 -->
               <li class="GradientAnimation" v-for="(item, index) in  SystemData.SystemPostsTopList" :key="index">
                  <!-- 头像个人信息 -->
                  <div class="list-title">
                     <!-- 头像 -->
                     <div class="list-title-image">
                        <el-image @click="Utils.viewAuthor(item.postsUserId?.id)"
                           :src="UtilsImage(item.postsUserId.useravatar)" fit="cover" lazy />
                     </div>
                     <!-- 信息 -->
                     <div class="list-title-nameinfo">
                        <div class="name" @click="Utils.viewAuthor(item.postsUserId?.id)">
                           {{ item.postsUserId.username }}
                        </div>
                        <div class="time">
                           <span>{{ Utils.timeDisplay(item.createdAt) }}</span>
                           <span class="lv">深圳</span>
                           <span class="lv">Lv.1</span>
                        </div>
                     </div>
                     <!-- 设置 -->
                     <div class="info-set">
                        <div class="info-set-jiantou">
                           <ClientOnly>
                              <el-dropdown trigger="click">
                                 <span class="iconfont icon-jiantou"></span>
                                 <template #dropdown>
                                    <el-dropdown-menu>
                                       <!-- 查看作者 YES 普通用户可执行-->
                                       <el-dropdown-item @click="Utils.viewAuthor(item.postsUserId?.id)">
                                          查看作者
                                       </el-dropdown-item>
                                       <!-- 拉黑名单 NO  普通用户可执行-->
                                       <el-dropdown-item v-if="userinfo?._id"
                                          @click="Utils.blacklist(item.postsUserId?.id)">
                                          拉黑名单
                                       </el-dropdown-item>
                                       <!-- 举报内容 NO  普通用户可执行-->
                                       <el-dropdown-item v-if="userinfo._id"
                                          @click="Utils.reportContent(item.postsUserId?.id)">
                                          举报内容
                                       </el-dropdown-item>
                                       <!-- 全局置顶 NO  终端管理员可执行-->
                                       <el-dropdown-item v-if="Utils.verifyTerminalAdmin(userinfo)" divided
                                          @click="Utils.globalTopping(item.postsUserId?.id)">
                                          {{ item.postsGlobalTop === true ? '取消全局' : '全局置顶' }}
                                       </el-dropdown-item>
                                       <!-- 置顶内容 NO  系统管理员可执行-->
                                       <el-dropdown-item v-if="Utils.verifySystemAdmin(SystemData.SystemInfo, userinfo)"
                                          divided @click="Utils.contentTopping(item)">
                                          {{ item.postsTop === true ? '取消置顶' : '帖子置顶' }}
                                       </el-dropdown-item>
                                       <!-- 推荐内容 NO  系统管理员可执行-->
                                       <el-dropdown-item v-if="Utils.verifySystemAdmin(SystemData.SystemInfo, userinfo)"
                                          @click="Utils.recommendedContent(item)">
                                          {{ item.postsRecommend === true ? '取消推荐' : '帖子推荐' }}
                                       </el-dropdown-item>
                                       <!-- 编辑内容  作者可执行-->
                                       <!-- <el-dropdown-item v-if="userinfo?._id && item.postsUserId?._id === userinfo._id"
                                          divided @click="Utils.commentTop(item)">
                                          {{ "编辑内容" }}
                                       </el-dropdown-item> -->
                                    </el-dropdown-menu>
                                 </template>
                              </el-dropdown>
                           </ClientOnly>
                        </div>
                     </div>
                  </div>
                  <!-- 标题 推荐 置顶 -->
                  <div class="content-title" v-if="item.postsTitle || item.postsTop || item.postsRecommend"
                     @click="gopostsinfo(item)">
                     <div class="left" v-if="item.postsTop || item.postsRecommend">
                        <span class="top" v-if="item.postsTop">置顶</span>
                        <span class="recommend" v-if="item.postsRecommend">推荐</span>
                     </div>
                     <div class="title">{{ item.postsTitle }}</div>
                  </div>
                  <!-- 内容 -->
                  <p class="list-content" :style="{ fontSize: item.postsTitle ? '16px' : '17px' }"
                     v-html="item.postsContent" @click="gopostsinfo(item)">

                  </p>
                  <!-- 视频展示 视频优先级比图片高，如果帖子都有，将会展示视频 -->
                  <!-- ...略 -->
                  <!-- 图片展示 -->
                  <div class="list-image" v-if="item.postsImages.length > 0" @click="gopostsinfo(item)">
                     <ClientOnly>
                        <div class="image-1" v-if="item.postsImages.length === 1">
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover" lazy />
                           </div>
                        </div>
                        <div class="image-2" v-if="item.postsImages.length === 2">
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover" lazy />
                           </div>
                        </div>
                        <div class="image-3" v-if="item.postsImages.length === 3">
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[2], true)" fit="cover" lazy />
                           </div>
                        </div>
                        <div class="image-4" v-if="item.postsImages.length >= 4">
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[2], true)" fit="cover" lazy />
                           </div>
                           <div class="div">
                              <el-image :src="UtilsImage(item.postsImages[3], true)" fit="cover" lazy />
                              <div class="residue" v-if="item.postsImages.length > 4">
                                 + {{ item.postsImages.length - 4 }}
                              </div>
                           </div>
                        </div>
                     </ClientOnly>
                  </div>
                  <!-- 话题标签 -->
                  <div class="list-topic" v-if="item.postsTags?.length > 0">
                     <span># 奶爸</span>
                     <span># 电动车</span>
                     <span># 萌娃</span>
                  </div>
                  <!-- 添加情绪（点赞） -->
                  <div class="list-like">
                     <div class="like-left">
                        <span class="iconfont icon-dianzan"></span>
                        <span>点赞</span>
                     </div>
                     <div class="like-right">
                        <div class="comment">
                           <span class="iconfont icon-pinglun"></span>
                           <span>{{ item.postsCommentNumber || 0 }}</span>
                           <span v-if="item.postsCommentUserId?.username"
                              @click="Utils.viewAuthor(item.postsCommentUserId?.id)">
                              {{ item.postsCommentUserId?.username }}
                           </span>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- 普通帖子列表 -->
               <li class="GradientAnimation" v-for="(item, index) in  SystemData.SystemPostsList" :key="index">
                  <!-- 头像个人信息 -->
                  <div class="list-title">
                     <!-- 头像 -->
                     <div class="list-title-image">
                        <el-image @click="Utils.viewAuthor(item.postsUserId?.id)"
                           :src="UtilsImage(item.postsUserId.useravatar)" fit="cover" lazy />
                     </div>
                     <!-- 信息 -->
                     <div class="list-title-nameinfo">
                        <div class="name" @click="Utils.viewAuthor(item.postsUserId?.id)">
                           {{ item.postsUserId.username }}
                        </div>
                        <div class="time">
                           <span>{{ Utils.timeDisplay(item.createdAt) }}</span>
                           <span class="lv">深圳</span>
                           <span class="lv">Lv.1</span>
                        </div>
                     </div>
                     <!-- 设置 -->
                     <div class="info-set">
                        <div class="info-set-jiantou">
                           <ClientOnly>
                              <el-dropdown trigger="click">
                                 <span class="iconfont icon-jiantou"></span>
                                 <template #dropdown>
                                    <el-dropdown-menu>
                                       <!-- 查看作者 YES 普通用户可执行-->
                                       <el-dropdown-item @click="Utils.viewAuthor(item.postsUserId?.id)">
                                          查看作者
                                       </el-dropdown-item>
                                       <!-- 拉黑名单 NO  普通用户可执行-->
                                       <el-dropdown-item v-if="userinfo?._id"
                                          @click="Utils.blacklist(item.postsUserId?.id)">
                                          拉黑名单
                                       </el-dropdown-item>
                                       <!-- 举报内容 NO  普通用户可执行-->
                                       <el-dropdown-item v-if="userinfo._id"
                                          @click="Utils.reportContent(item.postsUserId?.id)">
                                          举报内容
                                       </el-dropdown-item>
                                       <!-- 全局置顶 NO  终端管理员可执行-->
                                       <el-dropdown-item v-if="Utils.verifyTerminalAdmin(userinfo)" divided
                                          @click="Utils.globalTopping(item)">
                                          {{ item.postsGlobalTop === true ? '取消全局' : '全局置顶' }}
                                       </el-dropdown-item>
                                       <!-- 置顶内容 NO  系统管理员可执行-->
                                       <el-dropdown-item v-if="Utils.verifySystemAdmin(SystemData.SystemInfo, userinfo)"
                                          divided @click="Utils.contentTopping(item)">
                                          {{ item.postsTop === true ? '取消置顶' : '帖子置顶' }}
                                       </el-dropdown-item>
                                       <!-- 推荐内容 NO  系统管理员可执行-->
                                       <el-dropdown-item v-if="Utils.verifySystemAdmin(SystemData.SystemInfo, userinfo)"
                                          @click="Utils.recommendedContent(item)">
                                          {{ item.postsRecommend === true ? '取消推荐' : '帖子推荐' }}
                                       </el-dropdown-item>
                                       <!-- <el-dropdown-item v-if="userinfo?._id && item.postsUserId?._id === userinfo._id"
                                          divided @click="Utils.commentTop(item)">
                                          {{ "编辑帖子" }}
                                       </el-dropdown-item> -->
                                    </el-dropdown-menu>
                                 </template>
                              </el-dropdown>
                           </ClientOnly>
                        </div>
                     </div>
                  </div>
                  <!-- 标题 推荐 置顶 -->
                  <div class="content-title" v-if="item.postsTitle || item.postsTop || item.postsRecommend"
                     @click="gopostsinfo(item)">
                     <div class="left" v-if="item.postsTop || item.postsRecommend">
                        <span class="top" v-if="item.postsTop">置顶</span>
                        <span class="recommend" v-if="item.postsRecommend">推荐</span>
                     </div>
                     <div class="title">{{ item.postsTitle }}</div>
                  </div>
                  <!-- 内容 -->
                  <p class="list-content" :style="{ fontSize: item.postsTitle ? '16px' : '17px' }"
                     v-html="item.postsContent" @click="gopostsinfo(item)">
                  </p>
                  <!-- 视频 -->
                  <!-- 图片 -->
                  <div class="list-image" v-if="item.postsImages.length > 0" @click="gopostsinfo(item)">
                     <ClientOnly>
                        <div class="image-1" v-if="item.postsImages.length === 1">
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover" lazy />
                           </div>
                        </div>
                        <div class="image-2" v-if="item.postsImages.length === 2">
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover" lazy />
                           </div>
                        </div>
                        <div class="image-3" v-if="item.postsImages.length === 3">
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[2], true)" fit="cover" lazy />
                           </div>
                        </div>
                        <div class="image-4" v-if="item.postsImages.length >= 4">
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover" lazy />
                           </div>
                           <div class="div"><el-image :src="UtilsImage(item.postsImages[2], true)" fit="cover" lazy />
                           </div>
                           <div class="div">
                              <el-image :src="UtilsImage(item.postsImages[3], true)" fit="cover" lazy />
                              <div class="residue" v-if="item.postsImages.length > 4">
                                 + {{ item.postsImages.length - 4 }}
                              </div>
                           </div>
                        </div>
                     </ClientOnly>
                  </div>
                  <!-- 标签 -->
                  <div class="list-topic" v-if="item.postsTags?.length > 0">
                     <span># 奶爸</span>
                     <span># 电动车</span>
                     <span># 萌娃</span>
                  </div>
                  <!-- 添加情绪（点赞） -->
                  <div class="list-like">
                     <div class="like-left">
                        <span class="iconfont icon-dianzan"></span>
                        <span>点赞</span>
                     </div>
                     <div class="like-right">
                        <div class="comment">
                           <span class="iconfont icon-pinglun"></span>
                           <span>{{ item.postsCommentNumber || 0 }}</span>
                           <span v-if="item.postsCommentUserId?.username"
                              @click="Utils.viewAuthor(item.postsCommentUserId?.id)">
                              {{ item.postsCommentUserId?.username }}
                           </span>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- 空内容 -->
               <li v-if="SystemData.SystemPostsList.length === 0" style="padding: 19px 20px;">
                  <el-empty :image-size="200" description="没有内容" />
               </li>
               <!-- 加载更多 -->
               <li ref="target"
                  v-if="SystemData.SystemPostsList.length >= 10 && checkLastDigit(SystemData.SystemPostsList.length)"
                  style="display: flex;justify-content: center;" @click="more">
                  加载更多
               </li>
               <li v-if="SystemData.SystemPostsList.length > 0 && !checkLastDigit(SystemData.SystemPostsList.length)"
                  style="display: flex;justify-content: center;">
                  没有更多了
               </li>
            </ul>
         </ClientOnly>
      </div>
   </div>
   <!-- <PopDetailVue v-if="openPop" :strongholdInfo="ForumData.ForumInfo" :UserList="ForumData.ForumUserList"
      :JudianUserInfo="ForumData.ForumUserInfo" :PostsInfo="PostsInfo" :openPop="openPop" @close="closeOpenPop" /> -->
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';

import { useIntersectionObserver } from '@vueuse/core'

import dayjs from 'dayjs';
import { ElMessage } from "element-plus";
// import PopDetailVue from "@/components/sns/common/PopDetail.vue" // 弹窗详情页
const { userinfo } = storeToRefs(cnyzsUserpinia())
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: {},
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
         SystemPostsTopList: [],
         SystemPostsListlength: true
      }
   }
});

const emit = defineEmits(['getMorePostslist'])

// 点击帖子跳转至帖子详情页
const gopostsinfo = async (item: any) => {
   window.open('/' + item.postsId, '_blank')
}


function checkLastDigit(num: number) {
   // 将数字转换为字符串
   let strNum = num.toString();
   // 获取字符串的最后一个字符
   let lastDigit = parseInt(strNum.charAt(strNum.length - 1));
   // 判断最后一位是否为0
   if (lastDigit === 0) {
      return true;
   } else {
      return false;
   }
}

// 加载更多
const more = () => {
   emit('getMorePostslist')
}

const target = ref(null)
onMounted(() => {
   // target 是vue的对象引用。是观察的目标
   // isIntersecting 是否进入可视区域，true是进入 false是移出
   // observerElement 被观察的dom
   // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
   // 默认是0.1。 值越大表示观察越不灵敏
   const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) more()
   }, { threshold: 0 })
})

// 打开详情弹窗
const PostsInfo: any = ref({}) // 帖子信息
const openPop = ref(false) // true
const OpenPostsPop = (item: any) => {
   // // item 接收到帖子信息
   // openPop.value = true
   // PostsInfo.value = item
   // 暂时不用弹窗 跳转到详情页
   window.open("/" + item.id, '_blank')
}
// 关闭弹窗
const closeOpenPop = () => {
   openPop.value = false
}


</script>
<style lang="scss" scoped>
:deep(.el-empty__description p) {
   color: #CCD0DB;
}

.m-left {
   .posts-list {
      width: 580px;
      min-height: 402px;

      ul {
         width: 100%;
         height: 100%;
         // padding-bottom: 50px;

         li {
            width: 100%;
            padding: 15px 15px 20px;
            border-bottom: 1px solid #EEE;
            border-radius: 10px;
            transition: all .2s;
            position: relative;
            z-index: 1;
            background: #FFF;
            margin-bottom: 10px;
            box-shadow: var(--aoir-box-shadow);

            &:hover {
               background: #FFF;
               box-shadow: 0px 0px 20px 0px rgba(181, 181, 181, 0.367);
               // box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.45);
               // transform: translateY(-15px);
               z-index: 10;
            }

            .list-title {
               display: flex;
               margin-bottom: 15px;

               .list-title-image {
                  width: 42px;
                  height: 42px;
                  border-radius: 25px;
                  box-shadow: 0 0 10px #CCC;
                  overflow: hidden;
                  margin-right: 12px;
                  cursor: pointer;
               }

               .list-title-nameinfo {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;

                  .name {
                     font-size: 18px;
                     cursor: pointer;
                     color: #777777;
                     // font-weight: 700;

                     span {
                        margin-right: 10px;
                     }
                  }

                  .time {
                     color: #999;
                     font-size: 14px;

                     span {
                        margin-right: 10px;
                     }

                     .lv {
                        color: #b8b8b8;
                        padding: 1px 5px;
                        font-size: 12px;
                        border-radius: 3px;
                        background: #FAFAFA;
                        font-weight: 600;
                     }

                     .set {
                        box-shadow: 0 0 4px #00000017;
                        color: var(--aoir-color-primary-2);
                        border-radius: 5px;
                        background-color: #FFF;
                        font-size: 14px;
                        padding: 0 5px;
                        font-weight: 600;
                        cursor: pointer;
                     }
                  }
               }

               .info-set {
                  flex: 1;
                  display: flex;
                  justify-content: flex-end;

                  .info-set-jiantou {
                     .iconfont {
                        font-size: 25px;
                        color: #bababa;
                        cursor: pointer;
                     }
                  }
               }
            }

            .content-title {
               width: 100%;
               font-size: 18px;
               padding: 0 15px;
               display: flex;
               align-items: center;
               justify-content: flex-start;
               margin-bottom: 5px;

               &:hover {
                  opacity: .7;
                  cursor: pointer;
               }

               .left {
                  display: flex;
                  align-items: center;

                  .top {
                     margin-right: 10px;
                     font-size: 13px;
                     font-weight: 600;
                     color: #FFF;
                     background-color: #e64355;
                     border-radius: 5px;
                     padding: 4px 8px;
                     float: left;
                  }

                  .recommend {
                     margin-right: 10px;
                     font-size: 13px;
                     font-weight: 600;
                     color: #FFF;
                     background-color: #5540a3;
                     border-radius: 5px;
                     padding: 4px 8px;
                     float: left;
                  }
               }

               .title {
                  flex: 1;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  line-height: 1.4;
                  max-height: 1.4em;
                  position: relative;
               }
            }

            .list-content {
               margin: 0px 0 15px;
               padding: 0 15px;
               font-size: 16px;
               cursor: pointer;
               color: #444444;

               // 展示两行
               overflow: hidden;
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
               line-height: 1.4;
               max-height: 3.4em;
               white-space: pre-wrap;
               line-height: 28px;
               position: relative;

               &:hover {
                  opacity: .7;
               }
            }

            .list-image {
               padding: 0 15px;
               cursor: pointer;
               margin-bottom: 20px;
               border-radius: var(--aoir-border-radius);

               .el-image,
               .div {
                  border-radius: var(--aoir-border-radius);
                  min-height: 134px;
                  overflow: hidden;
               }

               .image-1 {
                  width: 100%;
                  border-radius: 10px;

                  .div {
                     width: 49%;
                     box-shadow: 0 0 5px #a0a0a02b;
                  }

                  .el-image {
                     width: 100%;
                  }
               }

               .image-2 {
                  display: flex;

                  .div {
                     // width: 135px;
                     width: 49%;
                     height: 150px;
                     margin-right: 15px;
                     box-shadow: 0 0 5px #a0a0a02b;

                     .el-image {
                        width: 100%;
                        height: 100%;
                     }

                     &:nth-child(2) {
                        margin-right: 0px;
                     }
                  }
               }

               .image-3 {
                  display: flex;
                  justify-content: space-between;


                  .div {
                     flex: 1;
                     height: 135px;
                     margin-right: 15px;
                     box-shadow: 0 0 5px #a0a0a02b;

                     .el-image {
                        width: 100%;
                        height: 100%;
                     }

                     &:nth-child(3) {
                        margin-right: 0px;
                     }
                  }
               }

               .image-4 {
                  display: flex;
                  flex-wrap: wrap;

                  .div {
                     width: 49%;
                     height: 150px;
                     margin-right: 10px;
                     margin-bottom: 10px;
                     box-shadow: 0 0 5px #a0a0a02b;
                     position: relative;

                     .residue {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: #44444436;
                        border-radius: var(--aoir-border-radius);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 30px;
                        color: #F5F5F5;
                        font-weight: 600;
                     }

                     .el-image {
                        width: 100%;
                        height: 100%;
                     }

                     &:nth-child(2n) {
                        margin-right: 0px;
                     }

                     &:nth-child(3) {
                        margin-bottom: 0px;
                     }

                     &:nth-child(4) {
                        margin-bottom: 0px;
                     }
                  }
               }
            }

            .list-topic {
               width: 100%;
               margin-bottom: 15px;
               // padding-left: 60px;
               padding: 0 15px;

               span {
                  margin-right: 15px;
                  color: #009688;
                  // text-shadow: 0 0 0.5px #009688;
                  cursor: pointer;
                  transition: all .2s;
                  font-size: 16px;

                  &:hover {
                     opacity: 0.5;
                  }
               }
            }

            .list-like {
               width: 100%;
               position: relative;
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 0 6px;

               .like-left {
                  color: #777;

                  &:hover {
                     opacity: .8;
                  }

                  span {
                     cursor: pointer;


                     &:nth-child(1) {
                        margin-right: 5px;
                        font-size: 20px;
                     }

                     &:nth-child(2) {
                        font-size: 15px;
                     }
                  }
               }

               .like-right {
                  flex: 1;
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  color: #777;

                  .comment {
                     display: flex;
                     justify-content: flex-end;
                     align-items: center;

                     &:hover {
                        opacity: .8;
                        color: #968900;
                     }

                     span {
                        cursor: pointer;
                        font-size: 15px;

                        &:nth-child(1) {
                           margin-right: 5px;
                           font-size: 20px;
                        }

                        &:nth-child(2) {
                           margin: 0;
                        }

                        &:nth-child(3) {
                           margin: 0 0px 0 15px;
                           font-size: 15px;
                        }
                     }
                  }


               }

            }
         }
      }
   }
}
</style>